<template>
  <div>
    <a-layout style="min-height: 550px">
      <!-- 头部 -->
      <a-layout-header>
        <a-row :gutter="24" class="rowHearder">
          <a-col :xl="24" :lg="24" :md="24" :sm="24">
            <span>
              <a-button type="primary" @click="makeReceipts">生成单据</a-button>
              <a-button style="margin-left: 40px; margin-right: 40px" type="primary" @click="SynsCredentials"
                >同步凭证</a-button
              >
            </span>
            <span>
              <span>当前账簿:</span>
              <span style="margin-left: 10px">
                <j-search-select-tag
                  style="width: 200px"
                  placeholder="请选择当前账簿"
                  v-model="accountId"
                  :dictOptions="dictOptions"
                  @change="handleChange"
                >
                </j-search-select-tag>
                <!-- <j-search-select-tag
                  style="width: 200px"
                  v-model="accountId"
                  placeholder="请选择当前账簿"
                  dict="lg_base_settlement_org,name,id"
                /> -->
              </span>
            </span>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout>
        <!-- 左侧tab -->
        <left-tab></left-tab>
        <a-layout-content :style="{ margin: '0px', padding: '24px', background: '#fff', minHeight: '280px' }">
          <template>
            <!-- <router-view  /> -->
            <route-view v-if="isRouterAlive"></route-view>
          </template> 
        </a-layout-content>
      </a-layout>
    </a-layout>
    <a-modal
      width="600px"
      :title="title"
      :visible="visibleDJ"
      :confirm-loading="confirmLoadingDJ"
      @ok="handleOk"
      @cancel="visibleDJ = false"
    >
      <j-form-container>
        <a-form-model ref="form" :rules="validatorRules" :model="model" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="账期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="date">
                <j-date v-model="model.date"  placeholder="请选择日期" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item :label="labelText" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orgId">
                <!-- <j-search-select-tag style="width: 100%" placeholder="请选择当前账簿" v-model="model.orgId" :dictOptions="dictOptions">
                </j-search-select-tag>  -->
                <j-multi-select-tag
                  style="width: 100%"
                  :placeholder="placeholderText + labelText"
                  v-model="model.orgId"
                  dictCode="lg_base_settlement_org,name,id"
                >
                </j-multi-select-tag>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="业务来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dataSource">
                <!-- <j-search-select-tag
                  placeholder="请选择业务来源"
                  v-model="model.dataSource"
                  :dictOptions="searchOptions"
                >
                </j-search-select-tag> -->
                <a-select v-model="model.dataSource" placeholder="请选择业务来源">
                  <a-select-option v-for="d in searchOptions" :key="d.value" :value="d.value" :disabled="((d.value === 'A01A04' || d.value === 'A01A05') && title.indexOf('生成单据') >-1) ?true :false ">
                    {{d.text}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-modal>
  </div>
</template>
<script>
// import RouteView from '@/components/layouts/RouteView'
import Vue from 'vue'
import leftTab from '../leftTab/leftTab.vue'
import { getAction, putAction } from '../../api/manage'
import RouteView from './RouteView.vue'
export default {
  name: 'logisticsOrderList',
  provide() {
    return {
      reload: this.reload,
      currentAccountId: () => this.accountId, //当前账簿id
    }
  },
  components: {
    leftTab,
    RouteView
  },
  data() {
    return {
      accountId: '',
      dictCode: 'lg_base_settlement_org,name,id',
      dictOptions: [], //账簿数据
      cashierCast: null,
      visibleDJ: false, //生成单据
      confirmLoadingDJ: false,
      title: '',
      model: {},
      labelText: '',
      placeholderText: '请选择',
      isRouterAlive: true,
      async: false,
      parentCode: 'A01',
      searchOptions: [], //业务来源
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url: {
        batchCreateVoucher: '/voucher/voucherRecord/batchCreateVoucher', //生成单据
        syncVoucher: '/voucher/voucherRecord/syncVoucher', //同步凭证
        url_root: '/sys/category/loadTreeRoot', //单据规则分类字典
      },
      validatorRules: {
        date: [{ required: true, message: '请选择账期' }],
        dataSource: [{ required: true, message: '请选择业务来源' }],
      },
    }
  },
  created() {
    this.getDataSource()
  },
  mounted() {
    this.mainInfoHeight = window.innerHeight - 285 + 'px'
    //this.getK3cloudAccountBookList()
    this.loadDictOptions()
  },
  methods: {
    //获取账簿  //结算组织
    loadDictOptions() {
      getAction(`/sys/dict/getDictItems/${this.dictCode}`, {}).then((res) => {
        this.dictOptions = []
        if (res.success) {
          res.result.unshift({ value: '', text: '全部', title: '全部' })
          this.dictOptions = res.result
        } else {
          this.dictOptions = []
        }
      })
    },
    //获取数据来源
    getDataSource() {
      let param = {
        async: this.async,
        pcode: this.parentCode,
      }
      getAction(this.url.url_root, param).then((res) => {
        if (res.success) {
          let dataSourceArr = []
          let typeData = [...res.result]
          typeData.map((item) => {
            // 把父级数据取出来
            if (!item.leaf) {
              dataSourceArr.push({ text: item.title, value: item.code })
            }
          })
          this.searchOptions = dataSourceArr
          Vue.ls.set('DATASOURCE', dataSourceArr)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleChange(value) {
      this.accountId = value
      this.reload()
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    //生成单据
    makeReceipts() {
      this.title = '请选择要生成单据的条件'
      this.labelText = '结算组织'
      this.model = {}
      this.visibleDJ = true
    },
    SynsCredentials() {
      this.title = '请选择同步凭证的条件'
      this.labelText = '账簿'
      this.model = {}
      this.visibleDJ = true
    },
    //生成单据,同步凭证
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoadingDJ = true
          let httpurl = ''
          if (this.title.indexOf('生成单据') > -1) {
            httpurl += this.url.batchCreateVoucher
          } else if (this.title.indexOf('同步凭证') > -1) {
            httpurl += this.url.syncVoucher
          }
          // this.reload()
          putAction(httpurl, this.model)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.visibleDJ = false
                this.reload() //刷新子页面
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoadingDJ = false
            })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-layout-header {
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}
/deep/.ant-calendar-picker-input.ant-input {
  font-size: 14px !important;
}
 /deep/.rowHearder > .ant-col {
   display: flex;
   justify-content: flex-end !important;
 }
</style>
